<template>
    <el-dialog title="提示" :visible.sync="addKeyDialogVisible" :append-to-body="true" :before-close="hideDialog">

        <el-form status-icon ref="addKeyForm" :model="addKeyForm" :rules="verification">

            <el-form-item label="Key" prop="keyName">
                <el-input v-model="addKeyForm.keyName" :placeholder="$t('aside.PleaseEnter')"/>
            </el-form-item>

            <el-form-item label="Type" prop="keyType">
                <el-select v-model="addKeyForm.keyType" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in typeList" :key="item.label" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addKey">{{$t('aside.determine')}}</el-button>
                <el-button @click.stop="hideDialog">{{$t('aside.cancel')}}</el-button>
        </span>


    </el-dialog>
</template>

<script>
export default {
    props:["addKeyDialogVisible","client","config"],
    data(){
        return {
            typeList:[
                {'lable':'String','value':'string'},
                {'lable':'Zset','value':'zset'},
                {'lable':'Set','value':'set'},
                {'lable':'Hash','value':'hash'},
                {'lable':'List','value':'list'}
            ],
            addKeyForm:{
                keyName:"",
                keyType:"string"
            },
            verification:{
                key:[
                    { required: true, message: this.$t("publicFeedback.KeyNotEmpty"), trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        //添加key
        addKey(){
            this.$refs.addKeyForm.validate((valid)=>{
                if(valid){
                    this.client.exists(this.addKeyForm.keyName).then((res)=>{
                        if(res===1){
                            //走确认
                            this.$confirm(this.$t("publicFeedback.keyAlreadyExists"),{
                                confirmButtonText: this.$t('aside.determine'),
                                cancelButtonText: this.$t('aside.cancel'),
                                type: 'warning'
                            }).then(()=>{
                                this.pushKey('replace');                               
                            }).catch(()=>{})
                        }else{
                            //走直接添加
                            this.pushKey('add');
                        }
                    }).catch((e)=>{
                        this.$message.error({
                            message:e.message
                        })
                    })
                }
            })
        },
        //隐藏dialog
        hideDialog(){
            this.$emit('hideDialog')
        },
        //添加key|覆盖
        pushKey(type){
            if(type==='replace'){
                this.client.del(this.addKeyForm.keyName).then((res)=>{
                    if(res===1){
                        const tabName=this.addKeyForm.keyName+"┃DB"+this.$parent.$parent.$parent.$parent.$refs.menuOperating.currentChoseDbNo+"┃"+this.config.name
                        this.$eventBus.$emit("rmTabByTabName",{client:this.client,tabName:tabName})
                    }
                }).catch((e)=>{
                    this.$message.error({
                        message:e.message
                    })
                })
            }
            //这里执行删除操作
            const tabName=this.addKeyForm.keyName+"┃DB"+this.$parent.$parent.$parent.$parent.$refs.menuOperating.currentChoseDbNo+"┃"+this.config.name
            this.$eventBus.$emit('addTab',{"key":this.addKeyForm.keyName,"target":"new","redisClient":this.client,"tabName":tabName,"type":"addKey","keyType":this.addKeyForm.keyType})
            this.hideDialog()
        }
    }
}
</script>

<style>

</style>